import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';
import { Checkbox } from 'antd';
import { Row } from 'antd';
const { Group } = Checkbox;
import './styles/choose_group.less';
import { useSelector } from 'react-redux';
import { cacheGroupList } from '@/utils/lib';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { useTranslation } from 'react-i18next';
import AgentService from '@/modules/Agent';

export type { CheckboxValueType };

interface ChooseGroupProps {
	onClose?: () => void;
	onSubmit?: (checked: CheckboxValueType[]) => void;
	visible?: boolean;
}

const ChooseGroup = (props: ChooseGroupProps) => {
	const { t } = useTranslation();
	// const { login } = useSelector(state => state) as any;
	const { onClose, onSubmit, visible = false } = props;
	const [options, setOptions] = useState<CheckboxValueType[]>([]);
	const defaultCheckedList: CheckboxValueType[] = [];
	const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
	const [indeterminate, setIndeterminate] = useState(false);
	const [checkAll, setCheckAll] = useState(false);
	const [isShowError, setIsShowError] = useState(false);

	const onCheckAllChange = (e: CheckboxChangeEvent) => {
		setCheckedList(e.target.checked ? options : []);
		setCheckAll(e.target.checked);
	};
	const onChange = (list: CheckboxValueType[]) => {
		setCheckedList(list);
		setCheckAll(list.length === options.length);
	};

	const selectLabel = (item: CheckboxValueType) => {
		if (checkedList.includes(item)) {
			const list = checkedList.filter(k => k !== item);
			setCheckedList([...list]);
		} else {
			setCheckedList([...checkedList, item]);
		}
	};

	const onOk = () => {
		if (checkedList.length === 0) {
			setIsShowError(true);
		} else {
			setIsShowError(false);
			AgentService.setCheckedGroups(checkedList);
			onSubmit && onSubmit(checkedList);
		}
	};

	useEffect(() => {
		setCheckAll(options.length !== 0 && checkedList.length === options.length);
	}, [checkedList]);
	useEffect(() => {
		if (AgentService.validGroups) {
			const list = [...AgentService.validGroups];
			setOptions(cacheGroupList(list) as any);
		}
	}, [AgentService.validGroups]);

	useEffect(() => {
		if (!visible) {
			setCheckedList([]);
		}
	}, [visible]);

	return (
		<Modal title={t('select-check-in-group')} open={visible} onCancel={onClose} onOk={onOk} cancelText={t('cancel')} okText={t('confirm')} className="checked-in-modal">
			<div className="check-group-contents" slot="contents">
				<Group value={checkedList} onChange={onChange}>
					{options.map((item: any, index) => (
						<div className="choose-item" onClick={() => selectLabel(item)} key={item.id}>
							<Checkbox value={item}>{item.name}</Checkbox>
						</div>
					))}
				</Group>
			</div>
			<div className="checked-all">
				<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
					{t('select-all')}
				</Checkbox>
			</div>
			<p className="error-info"> {isShowError ? '* ' + t('select-need-checked-in-group') : ''}</p>
		</Modal>
	);
};

export default ChooseGroup;
